<template>
  <div>
    <div v-loading="listLoading" v-if="isList" style="min-height:200px" element-loading-text="给我一点点时间~~">
      <slot :list="tableDate" /></div>
    <el-table ref="innerTable" v-bind="$attrs" v-else v-on="$listeners" :data="tableDate" v-loading="listLoading" element-loading-text="给我一点时间" :border="border" fit highlight-current-row style="width: 100%">
      <el-table-column align="center" type="index" width="50" v-if="index" />
      <slot/></el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.start" :page-sizes="[10,20,30, 50]" :page-size="pageInfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" /></div>
  </div>
</template>

<script>
export default {
  props: {
    fetch: {
      type: Function,
      default: page => {
        const mockList = []
        const begin = (page.start - 1) * page.limit
        for (let i = 0; i < page.limit.length; i++) {
          const row = {}
          for (let c = 0; c < 10; c++) {
            row[`col${c + 1}`] = `测试数据${begin + i + 1}-${c + 1}`
          }
          mockList.push(row)
        }
        return Promise.resolve({
          data: mockList,
          start: page.start,
          limit: page.limit,
          total: 100
        })
      }
    },
    isList: {
      type: Boolean,
      default: false
    },
    initQuery: {
      type: Boolean,
      default: true
    },
    index: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default: () => {
        return {}
      }
    },
    border: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    //  query (val) {
    //    this.fetchData(1)
    //  }
  },
  data () {
    return {
      tableDate: [],
      pageInfo: {
        start: 1,
        limit: 10,
        total: 0,
        type: 'page'
      },
      listLoading: false
    }
  },
  methods: {
    async fetchData (start) {
      this.listLoading = true
      const query = Object.assign({}, this.query)
      query.start = start
      query.limit = this.pageInfo.limit
      query.type = this.pageInfo.type
      const res = await this.fetch(query, this.pageInfo)
      res.pageTotal = Math.ceil(res.count / this.pageInfo.limit)
      if (res.pageTotal > 0 && res.pageTotal < start) {
        this.fetchData(res.pageTotal)
        return
      }
      this.listLoading = false
      // this.pageInfo.start = parseInt(res.start)
      // this.pageInfo.limit = parseInt(res.limit)
      this.pageInfo.total = parseInt(res.count)
      this.pageInfo.start = parseInt(start)
      this.tableDate = res.data
    },
    handleSizeChange (limit) {
      this.pageInfo.limit = limit
      this.fetchData(this.pageInfo.start)
    },
    handleCurrentChange (currentPage) {
      this.fetchData(currentPage)
    },
    refresh (reset = false) {
      const start = reset ? 1 : this.pageInfo.start

      this.fetchData(start)
    },
    getSelection () {
      return this.$refs.innerTable.selection
    }
  },
  mounted () {
    if (this.initQuery) {
      this.fetchData(1)
    }
  }
}
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
